<template>
    <div class="toggle-container">
        <div class="toggle-sidebar">
            <div
                v-for="item in data"
                :key="item.key"  
                :class="{ 'sidebar-item':true, 'selected':item.key === activeName }"   
                @click="activeName = item.key"       
            >
                <div class="sidebar-title">{{ item.title }}</div>
                <div class="sidebar-desc" >{{  item.content }}</div>
            </div>
        </div>
        <div class="toggle-content">
            <Transition name="fade3" mode="out-in">
                <img :key="activeName" :src="data[activeName].img" />
            </Transition>
        </div>
    </div>
  </template>
  
<script setup>
    import { ref } from 'vue';
    import Bg1 from '../../../../public/scene-bg-1.png';
    import Bg2 from '../../../../public/scene-bg-2.png';
    import Bg3 from '../../../../public/scene-bg-3.png';
    import Bg4 from '../../../../public/scene-bg-4.png';
    const activeName = ref(0);
    const data = [
        { title:'智慧配电站', key:0, img:Bg1, content:'智能调度、供需平衡、E-P分析（回归分析）、基本电费动态削峰、设备空载率、负荷率分析、力调电费无功优化、电度电费移峰填谷、同质性类比。' }, 
        { title:'智慧冰水站', key:1, img:Bg2, content:'冰水站AI Deep Ctrl算法控制，根据用冷模型AI管控空调主机加减机、管阻参数控制、智能调参、智能阀门控制、智能水泵控制等实现冰水站高效机房能效水准(EER 5.0以上），大幅提升空调设备的使用寿命和用冷效率' }, 
        { title:'智慧空压站', key:2, img:Bg3, content:'全面监测站房设备及气体质量数据，实现在线点巡检，提高管理效率；根据母管压力波动情况，智能控制设备，调节运行参数，优化运行组合实现供需平衡，保障稳压供气，实现站房无人值守和节能降耗' }, 
        { title:'智慧水自控', key:3, img:Bg4, content:'水质探测传感器通过智能算法实时动态调整加药量，实现水质科学管理，消除水垢沉积降低主机能耗，提升主机使用寿命，降低通泡次数和清洗水塔的人工成本' }
    ];
</script>

<style scoped>      
    .toggle-container {
        display:flex;
        width:100%;
        /* margin:0 auto; */
        height:460px;
    } 
    .toggle-container .toggle-sidebar {
        
    }
    .toggle-sidebar .sidebar-item {
        width:466px;
        height:88px;
        line-height:88px;
        border-bottom:1px solid #cacfd8;
        text-align:left;
        padding:0 40px;
        display:flex;
        flex-direction: column;
        transition:all 0.3s ease-out;
    }
    .toggle-sidebar .sidebar-item.selected {
        height:186px;
        border-radius:4px;
        padding:32px 40px;
        background-repeat: no-repeat;
        background-size:cover;
        background-position: 50% 50%;
        background-color:#335cff;
        background-image:url(../../../public/scene-icon-6.png);
    }
    .toggle-sidebar .sidebar-item .sidebar-title {
        font-size:24px;
        color:#525866;
    }
    .toggle-sidebar .sidebar-item.selected .sidebar-title {
        color:#fff;
        line-height:24px;
        margin-bottom:14px;
    }
    .toggle-sidebar .sidebar-item .sidebar-desc {
        display:none;
        font-size:14px;
        color:#fff;
    }
    .toggle-sidebar .sidebar-item.selected .sidebar-desc {
        display:block;
        line-height:24px;
    }
    .toggle-container .toggle-content {
        width:68%;
    }
    .fade3-enter-active, .fade3-leave-active {
        transition:opacity 0.3s ease-out;    
    }
    .fade3-enter-from, .fade3-leave-to {
        opacity:0;
    }
</style>
 